<template>
	<view class="coverFull" style="background-color: #fff;">
		<vs-nav-bar background="#fff" title="新闻" fixed topHeight></vs-nav-bar>
		<view class="content">
			<view class="wraper" v-for="(item,index) in list" :key="index">
					<view class="flex item-box" @click="itemClick(index)" >
						<view class="flex column item-left">
							<view class="flex1">
								<view class=" tittle lineClamp_2">【春芽历程】{{item.name}}</view>
							</view>
							<view class="flex middle between bottom">
								<view class="b-l">
									<text>{{item.readNum}}次阅读</text>
									<text>&bull;</text>
									<text>{{item.commentNum}}次评论</text>
								</view>
								<view class="b-r">
									<text>{{$Time.timeIntervalToNow(new Date(item.createTime).getTime())}}</text>
								</view>
							</view>
						</view>
						<view class="flex middle item-right" style="margin-left: 10px;">
								<!-- <vs-lazload  size="100" :src="item.imgPath"></vs-lazload> -->
								<vs-ratio-view ratio="1/0.8">
									<image class="coverFull" :src="item.imgPath"></image>
								</vs-ratio-view>
						</view>
					</view>
			</view>
			<vs-loadmore :loading="bottomLoading" :paddingTB="30"></vs-loadmore>
		</view>
	</view>
</template>

<script>
	import {getNewsList} from '@/api/homeapi'
	export default{
		data(){
			return{
				listQuery:{
					page:1,
					rows:10
				},
				list:[],
				bottomLoading:true
						
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.pulldownAction()
		},
		onReachBottom() {
			this.reachbottomAction()
		},
		methods:{
			itemClick(index){
				// $Router.push({name:'news_detail',params:{title:item.name,content:item.content}})
				this.$Router.push({
					name:'news_detail',
					params:{
						info:this.list[index],
					}
				})
				
			},
			getList(){
				getNewsList(this.listQuery).then(res=>{
					console.log(res);
					res.data.forEach(v=>{
						v.imgPath = this.$Store.baseUrl + v.imgPath
						return v
					})
					this.list = [...this.list,...res.data]
					console.log(this.list);
					uni.hideLoading()
				})
			},
			starListQuery(){       
				return new Promise(resolve=>{
					this.listQuery.page = 1
					this.listQuery.rows = 10
					this.list = []
					resolve()
				})
			},
			reachbottomAction(){
				this.getList()
				this.bottomLoading = true
				setTimeout(()=>{
					this.bottomLoading = false
				},1000)
			},
			pulldownAction(){
				this.starListQuery().then(()=>{
					this.bottomLoading = true
					this.getList()
					setTimeout(()=> {
						this.bottomLoading = false
						uni.stopPullDownRefresh();
					}, 1000);
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content{
		.wraper{
			width: 100%;
			border-bottom: 1px solid #ccc;
			background: #fff;
		}
		.item-box{
			width: 90%;
			margin: 0 auto;
			padding: 10px 0;
			.item-left{
				flex: 1;
				.title{
					font-size: 16px;
					color: #363636;
				}
				.bottom{
					font-size: 12px;
					color: #888;
				}
			}
			.item-right{
				width: 25%;
				display: block;
				
			}
		}
	}
</style>
